MVVM প্যাটার্নের মধ্যে ViewModel এর মূল ভূমিকা হল Model বা API থেকে ডাটা গ্রহণ করা এবং সেই ডাটাকে View-এ প্রদর্শনের জন্য প্রস্তুত করা। API থেকে ডাটা ফেচ করা এবং সেটি ViewModel-এ ম্যানেজ করা একটি সাধারণ কাজ, যা অনেক অ্যাপ্লিকেশনেই ব্যবহৃত হয়।

এই প্রক্রিয়াটি একটি Service Layer তৈরি করে যা API কল করবে এবং ডাটাকে ViewModel-এ হ্যান্ডলিং করবে। এরপর, ViewModel ডাটা গ্রহণ করে তা UI-তে মাপসই করে দেখাবে।

API থেকে ডাটা ফেচ করার সাধারণ ধাপ:

1. HTTP Client সেটআপ: API থেকে ডাটা ফেচ করার জন্য একটি HTTP ক্লায়েন্ট তৈরি করতে হয়।
2. API কল করা: API এ HTTP রিকোয়েস্ট পাঠিয়ে ডাটা ফেচ করা হয়।
3. ডাটা গ্রহণ: API থেকে পাওয়া ডাটাকে JSON বা XML ফরম্যাটে প্রক্রিয়া করা হয় এবং তা Model-এ অ্যাসাইন করা হয়।
4. ViewModel-এ ডাটা ম্যানেজ করা: ডাটাকে ViewModel-এ সেট করা হয়, যাতে এটি UI-তে ডিসপ্লে করা যায়।
5. Data Binding: ViewModel থেকে View-এ ডাটা প্রপাগেট করার জন্য Data Binding ব্যবহার করা হয়।

1. HTTP Client সেটআপ এবং API কল

API থেকে ডাটা ফেচ করার জন্য প্রথমে একটি HTTP ক্লায়েন্ট তৈরি করতে হবে, যা API এর সাথে যোগাযোগ করবে। সাধারণত HttpClient বা HttpClientFactory ব্যবহার করা হয়।

HttpClient ব্যবহার করে API থেকে ডাটা ফেচ করা:

public interface IDataService
{
    Task<List<Product>> GetProductsAsync();
}

public class DataService : IDataService
{
    private readonly HttpClient _httpClient;

    public DataService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task<List<Product>> GetProductsAsync()
    {
        var response = await _httpClient.GetAsync("https://api.example.com/products");

        if (response.IsSuccessStatusCode)
        {
            var content = await response.Content.ReadAsStringAsync();
            return JsonConvert.DeserializeObject<List<Product>>(content);
        }

        return null;
    }
}

এখানে, DataService ক্লাস IDataService ইন্টারফেস ইমপ্লিমেন্ট করছে এবং API থেকে ডাটা ফেচ করার জন্য HttpClient ব্যবহার করা হয়েছে। GetProductsAsync() মেথডটি API থেকে ডাটা ফেচ করে এবং তা একটি List হিসাবে রিটার্ন করে।

2. ViewModel-এ API ডাটা ম্যানেজমেন্ট

API থেকে ডাটা ফেচ করার পর, সেই ডাটা ViewModel-এ ম্যানেজ করতে হবে। ViewModel সাধারণত Model বা Service এর ডেটাকে UI-এর জন্য প্রস্তুত করে।

ViewModel কোড:

public class ProductViewModel : INotifyPropertyChanged
{
    private readonly IDataService _dataService;
    private ObservableCollection<Product> _products;
    private bool _isLoading;

    public ObservableCollection<Product> Products
    {
        get { return _products; }
        set
        {
            if (_products != value)
            {
                _products = value;
                OnPropertyChanged(nameof(Products));
            }
        }
    }

    public bool IsLoading
    {
        get { return _isLoading; }
        set
        {
            if (_isLoading != value)
            {
                _isLoading = value;
                OnPropertyChanged(nameof(IsLoading));
            }
        }
    }

    public ProductViewModel(IDataService dataService)
    {
        _dataService = dataService;
        _products = new ObservableCollection<Product>();
    }

    public async Task LoadProductsAsync()
    {
        IsLoading = true;
        var products = await _dataService.GetProductsAsync();
        if (products != null)
        {
            Products = new ObservableCollection<Product>(products);
        }
        IsLoading = false;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

এখানে, ProductViewModel ক্লাসে IDataService এর একটি ইনস্ট্যান্স দিয়ে LoadProductsAsync() মেথড তৈরি করা হয়েছে, যা API থেকে ডাটা ফেচ করে Products প্রপার্টিতে সেট করে। ObservableCollection<Product> ব্যবহার করা হয়েছে, যাতে UI এর সাথে ডাটা চেঞ্জ হলে এটি স্বয়ংক্রিয়ভাবে আপডেট হয়। IsLoading প্রপার্টি ব্যবহার করা হয়েছে UI-তে লোডিং স্টেট দেখানোর জন্য।

3. Data Binding

API থেকে ফেচ করা ডাটাকে View-এ প্রদর্শন করতে Data Binding ব্যবহার করা হয়। ViewModel-এ থাকা ObservableCollection বা অন্যান্য প্রপার্টি View-এ Binding করতে হবে।

XAML ফাইল (View) এ Data Binding:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Products" Height="350" Width="525">
    <Grid>
        <ListBox ItemsSource="{Binding Products}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text="{Binding Price}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

        <ProgressBar IsIndeterminate="True" Visibility="{Binding IsLoading, Converter={StaticResource BoolToVisibilityConverter}}" />
    </Grid>
</Window>

এখানে, Products প্রপার্টিটি ListBox এর ItemsSource এর সাথে বাউন্ড করা হয়েছে, যাতে ProductViewModel থেকে পাওয়া প্রোডাক্টের তালিকা UI তে প্রদর্শিত হয়। এছাড়া ProgressBar এর Visibility প্রপার্টি IsLoading এর ভিত্তিতে কন্ট্রোল করা হয়েছে, যাতে ডাটা লোড হওয়া অবস্থায় লোডিং ইন্ডিকেটর দেখানো যায়।

4. Error Handling

API থেকে ডাটা ফেচ করার সময় Error Handling খুবই গুরুত্বপূর্ণ, বিশেষ করে নেটওয়ার্ক বা সার্ভার সমস্যা হলে। Try-Catch ব্লক ব্যবহার করে ত্রুটি হ্যান্ডেল করা যেতে পারে।

Error Handling Example:

public async Task LoadProductsAsync()
{
    try
    {
        IsLoading = true;
        var products = await _dataService.GetProductsAsync();
        if (products != null)
        {
            Products = new ObservableCollection<Product>(products);
        }
        else
        {
            // Handle empty or null response
            ShowError("No products found.");
        }
    }
    catch (Exception ex)
    {
        ShowError("Failed to load products: " + ex.Message);
    }
    finally
    {
        IsLoading = false;
    }
}

এখানে try-catch ব্লকের মধ্যে API কলটি করা হয়েছে, এবং যদি কোনো সমস্যা হয়, তবে ত্রুটি বার্তা প্রদর্শন করা হবে।

সারাংশ

MVVM প্যাটার্নে API থেকে ডাটা ফেচ করা এবং ViewModel-এ ম্যানেজ করা একটি গুরুত্বপূর্ণ অংশ। API কল করার জন্য HttpClient বা HttpClientFactory ব্যবহার করা হয়, ডাটা ফেচ করে তা ViewModel এ প্রসেস করা হয় এবং Data Binding এর মাধ্যমে UI তে প্রদর্শিত হয়। এই প্রক্রিয়ায় IsLoading এবং Error Handling এর মাধ্যমে ভালো ইউজার এক্সপেরিয়েন্স নিশ্চিত করা হয়।